<template>
  <div class="the-header">
    <div class="header-logo" @click="goHome">
<!--        <svg class="icon">-->
<!--            <use xlink:href = ""></use>-->
          <img style="height: 40px" src="../assets/img/logio.png">

<!--        </svg>-->
        <span>Food</span>
    </div>
    <ul class="navbar">
        <li :class="{active: item.name == activeName}" v-for="item in navMsg" :key="item.path" @click="goPage(item.path,item.name)">
            {{item.name}}
        </li>
        <li>
            <div class="header-search">
                <input type="text" @input="changeKeyword" placeholder="搜索美食" @keyup.enter="goSearch()" v-model="keywords">
                <div class="search-btn" @click="goSearch()">
                    <svg class="icon">
                        <use xlink:href = "#icon-sousuo"></use>
                    </svg>
                </div>
              <div class="sear">
                <!--                <ul>-->
                <!--                  <li @click="changeky(item)" v-for="(item,index) in sh" :key="index">{{item}}</li>-->
                <!--                </ul>-->
                <h1 class="sear-h1" @click="changeky(item)" v-for="(item,index) in sh" :key="index">{{item}}</h1>
              </div>
            </div>
        </li>
        <li v-show="!loginIn" :class="{active: item.name == activeName}" v-for="item in loginMsg" :key="item.path" @click="goPage(item.path,item.name)">
            {{item.name}}
        </li>
    </ul>
    <div class="header-right" v-show="loginIn">
        <div id='user'>
            <img :src='avator'>
        </div>
        <ul class="menu">
            <li v-for="(item,index) in menuList" :key="index" @click="goMenuList(item.path)">{{item.name}}</li>
        </ul>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex';
import {navMsg,loginMsg,menuList} from '../assets/data/header';
import {searchEngie,searchByname} from "../api/food";

export default {
  name: 'the-header',
  data() {
      return {
          navMsg: [],    //左侧导航栏
          keywords: '',  //搜索关键字
          loginMsg: [],  //右侧导航栏
          menuList: [], //用户下拉菜单
          sh:[],
      }
  },
  computed:{
      ...mapGetters([
          'activeName',
          'loginIn',
          'avator'
      ])
  },
  created() {
      this.navMsg = navMsg;
      this.loginMsg = loginMsg;
      this.menuList = menuList;
  },
  mounted(){
      document.querySelector('#user').addEventListener('click',function(e){
          document.querySelector('.menu').classList.add("show");
          e.stopPropagation()           //关键在于阻止冒泡
      },false);
      document.querySelector('.menu').addEventListener('click',function(e){
          e.stopPropagation()           //点击菜单内部时，阻止时间冒泡，这样，点击内部时，菜单不会关闭
      },false);
      document.addEventListener('click',function(){
        document.querySelector('.menu').classList.remove('show');
      },false);
  },

  methods: {
       //提示信息
        notify(title,type) {
            this.$notify({
                title: title,
                type: type
            })
        },
      goHome() {
          this.$router.push({path: "/"});
      },
      goPage(path,name) {
          if(!this.loginIn && path=='/my-music'){
              this.notify('请先登录','warning');
          }else{
            this.$store.commit('setActiveName',name);
            this.$router.push({path: path});
          }
      },
      goSearch(){
         searchByname(this.keywords).then(res=>{
           if (res.data.code == 200){
             window.sessionStorage.setItem("foods",JSON.stringify(res.data.obj));
             this.$router.go(0)
           }
        })
          this.$router.push({path:'/search',query:{keywords: this.keywords}})
      },
      //获取图片地址
      attachImageUrl (srcUrl) {
        return srcUrl? this.$store.state.configure.HOST+srcUrl : '../assets/img/user.jpg';
      },
      goMenuList(path){
          if(path == 0){
              this.$store.commit('setLoginIn',false);
              this.$store.commit('setIsActive',false);
              this.$router.go(0);
          }else{
              this.$router.push({path:path});
          }
      },
      changeKeyword(){
        this.sh = [];
        if (this.keywords==""){
        this.sh=[];
        }
        if (this.keywords!="") {
          searchEngie(this.keywords).then(res => {
              this.sh = res.data.obj;

          })
        }
      },
      changeky(key){
        this.keywords = key;
        this.sh = [];
      },
  }

}
</script>

<style lang="scss" scoped>
@import '../assets/css/the-header.scss';
.sear{
  height: 400px;
  width: 300px;
  position: absolute;
  top:60px;
  left: 650px;

}
.sear-h1{

  font-size: 20px;
  margin-top: -25px;
}

.zzh{
  height: $header-height;
  white-space: nowrap;
}

.zzq{

  //margin-left: 20px;
  //font-size: $font-size-header;
  //color: $color-grey;
  margin: $header-nav-margin;
  padding: $header-nav-padding;
  font-size: $font-size-header;
  color: $color-grey;
  text-align: center;
  border-bottom: none;
  box-sizing: border-box;
  cursor: pointer;
}
</style>
